<template>
  <div class="manage">
    <div class="tenancemain">
      <div class="surface"> 
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="任务名称">
            <el-input v-model="formInline.name" placeholder="任务名称"></el-input>
          </el-form-item>
          <el-form-item label="任务主题">
            <el-input v-model="formInline.relyon" placeholder="任务主题"></el-input>
          </el-form-item>
          <el-form-item label="任务状态">
            <el-select v-model="formInline.istemporary" placeholder="请选择">
              <el-option label="TASK_STAGING" value="1"></el-option>
              <el-option label="TASK_RUNNING" value="0"></el-option>
              <el-option label="TASK_FINISHED" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
     </div>
     <!-- <el-button-group class="btngroup">
        <el-button type="primary" icon="el-icon-plus" @click="add()" >新建</el-button>
        <el-button type="primary" icon="el-icon-edit">编辑</el-button>
        <el-button type="primary" icon="el-icon-refresh">刷新</el-button>
        <el-button type="primary" icon="el-icon-check">单独执行</el-button>
        <el-button type="primary" icon="el-icon-check">执行任务和依赖</el-button>
      </el-button-group> -->
    <el-table
      :data="tableData"
      size="small"
      border
      max-height="400"
      style="width: 100%">
      <!-- <el-table-column
      width="55">
      <template  slot-scope="scope">
        <el-radio class="radio" v-model="radio" :label="scope.row.id"></el-radio>
      </template>
    </el-table-column> -->
      <el-table-column
        prop="taskName"
        label="任务名称"
        align='center'
        width="230">
      </el-table-column>
        <el-table-column
        prop="jobGroup"
        label="任务分组"
        align='center'
        width="180">
        </el-table-column>
        <el-table-column
          prop="jobStatus"
          align='center'
          label="状态"
          width="180">
        </el-table-column>
        
        <el-table-column
          prop="startTime"
          align='center'
          label="创建时间">
          <!-- <template slot-scope="scope">{{ scope.row.insertTm | formatDate  }}</template> -->
        </el-table-column>
        <el-table-column
          prop="etlDate"
          align='center'
          label="调度时间">
          <!-- <template slot-scope="scope">{{ scope.row.insertTm | formatDate  }}</template> -->
        </el-table-column>
  </el-table>
  <el-pagination class="page"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="page.pageNum"
    :page-sizes="[10, 15, 20, 15]"
    :page-size="page.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
    <!-- <el-dialog :title="diaTitle" :visible.sync="isTable">
        <el-table :data="tableList2" >
      <template v-for="(col,index) in cols">
        <el-table-column  :prop="col.prop" :label="col.label" :key="index" >
        </el-table-column>
      </template>
        </el-table>
        <el-pagination
        class="page"
          background
          layout="prev, pager, next"
          :total="3">
        </el-pagination>
    </el-dialog>
    <el-dialog title="入值传参" :visible.sync="formDia">
        
            <el-button type="primary" @click="addparam()" size="small">新增入参</el-button>
          <el-table :data="parameters" size="mini">
          <el-table-column label="参数名称">
            <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="small" v-model="scope.row.name" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.name }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="参数值">
            <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="small" v-model="scope.row.value" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.value }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="参数说明">
            <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="small" v-model="scope.row.desc" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.desc }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button @click="scope.row.is_edit = true"  type="text" v-if="scope.row.is_edit==false" size="small">编辑</el-button>
                 <el-button v-if="scope.row.is_edit" @click="scope.row.is_edit = false" type="text" size="small">保存</el-button>
                <el-button @click="deletePars(scope.row.id)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button @click="formDia = false">取 消</el-button>
            <el-button type="primary" @click="formDia = false">确 定</el-button>
        </div>
    </el-dialog>
     <el-dialog title="新增功能任务" :visible.sync="isaddform" class="addDialog">
        <el-form :model="formadd" class="addform">
            <table>
              <tr>
                <td>
                  <el-form-item label="任务英文名" :label-width="formLabelWidth">
                    <el-input  v-model="formadd.modelCode" auto-complete="off"></el-input>
                </el-form-item>
                </td>
                <td>
                  <el-form-item label="所属主题" :label-width="formLabelWidth">
                    <el-input  v-model="formadd.jobGroup" auto-complete="off"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="cron表达式" :label-width="formLabelWidth">
                   <el-input  v-model="formadd.jobCron" auto-complete="off"></el-input>
                </el-form-item>
                </td>
                <td>
                  <el-form-item label="上传脚本" :label-width="formLabelWidth">
                    <el-input v-model="formadd.files" type="file" ><a href="">上传</a></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <el-form-item label="任务说明" :label-width="formLabelWidth">
                    <el-input v-model="formadd.jobDesc" type="textarea" auto-complete="off"></el-input>
                </el-form-item>
                </td>
              </tr>
            </table>
            <el-button type="primary" @click="addTable" size="small">新增任务依赖</el-button>
          <el-table :data="rows" size="mini">
          <el-table-column label="任务主题">
            <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="small" v-model="scope.row.jobGroup" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.jobGroup }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="任务名称">
            <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="small" v-model="scope.row.jobName" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.jobName }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button @click="scope.row.is_edit = true"  v-if="scope.row.is_edit==false" type="text" size="small">编辑</el-button>
                 <el-button v-if="scope.row.is_edit" @click="scope.row.is_edit = false" type="text" size="small">保存</el-button>
                <el-button @click="delectAdd(scope.row.id)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="isaddform = false">取 消</el-button>
            <el-button type="primary" @click="addform()">确 定</el-button>
        </div>
    </el-dialog> -->
    </div>
  </div>
</template>

<script>
import headnav from '@/components/HeadNav';
import {formatDate} from '@/utils/dateFomart'
import {getJobStates} from "@/api/manage"
export default {
  name: 'tenance',
  components:{
    headnav
  },
   data () {
    return {
        surface:'',
        currentPage:1,
        isTable:false,
        isaddform:false,
        formDia:false,
        radio:'',
        page:{
          pageNum:1,
          pageSize:10
        },
        total:0,
        diaTitle:"",
         formInline: {
          name: '',
          relyon:'',
          istemporary: '全部'
        },

       tableData: [
         {jobName:"dwb_001",
jobGroup:"dwb",
state:"TASK_STAGING",
creationTime:"2018-08-02 16:28:23"}
,
{jobName:"dwb_001",
jobGroup:"dwb",
state:"TASK_RUNNING",
creationTime:"2018-08-02 16:28:25"}
,
{jobName:"dwb_001",
jobGroup:"dwb",
state:"TASK_FINISHED",
creationTime:"2018-08-08 16:37:33"}
,
{jobName:"dwb_002",
jobGroup:"dwb",
state:"TASK_STAGING",
creationTime:"2018-08-02 16:21:23"}
,
{jobName:"dwb_002",
jobGroup:"dwb",
state:"TASK_RUNNING",
creationTime:"2018-08-02 16:21:25"}
,
{jobName:"sta_001",
jobGroup:"sta",
state:"TASK_STAGING",
creationTime:"2018-08-02 14:21:43"}
,
{jobName:"sta_001",
jobGroup:"sta",
state:"TASK_RUNNING",
creationTime:"2018-08-02 14:21:45"}
,
{jobName:"sta_001",
jobGroup:"sta",
state:"TASK_FINISHED",
creationTime:"2018-08-08 14:27:33"}

       ],
        cols:[
        {
          label:"依赖任务名称",
          prop:"depenJobName",
          type:"normal",

        },
        {
          label:"依赖任务主题",
          prop:"depenJobGroup",
          type:"normal",
          
        },
        {
          label:"状态",
          prop:"state",
          type:"normal",
          
        },
      ],
      rows:[
        {
          id:2,
          jobGroup:"",
          jobName:"",
          is_edit:true,
        }
      ],
      parameters:[
        {
          id:0,
          name:"",
          value:"",
          desc:'',
          is_edit:true,
        }
      ],
       tableList2:[
        {depenJobName:"sta_001",
        depenJobGroup:"sta",
        state:"TASK_FINISHED"
        }
        ,
        {depenJobName:"dwb_001",
        depenJobGroup:"dwb",
        state:"TASK_FINISHED"
        }
        ,
        {depenJobName:"dwb_002",
        depenJobGroup:"dwb",
        state:"TASK_RUNNING"
        }
      ],
      formLabelWidth: '120px'
    }
  },
  filters: {
        formatDate(time) {
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm');
        }
    },
    mounted(){
      this.getstatelist(this.page);
    },
  methods:{
    onSubmit(){
      
    },
    //获取任务状态列表信息
    getstatelist(page){
      getJobStates(page).then(res=>{
        console.log(res);
        if(res.data.errorNo=="0"){
          this.tableData=res.data.results.list;
          this.total=res.data.results.totals;
        }
      })
    },
    addTable(){
      let id=this.rows.length
      this.rows.push({
          id:id,
          jobGroup:"",
          jobName:"",
          is_edit:true,
        })
    },
     handleSizeChange(val) {
       this.page.pageSize=val;
       this.getstatelist(this.page);
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page.pageNum=val;
        this.getstatelist(this.page);
        console.log(`当前页: ${val}`);
      },
      watchSurface(val){
          console.log(val);
          this.isTable=true;
          this.diaTitle=val+"依赖任务执行情况";
      },
    backups(data){
        this.formDia=true;
        console.log(data);
    },
    add(){
      this.isaddform=true;
    },
    addform(){
      this.formadd.insertTm=new Date();
      this.tableData.push(this.formadd)
      this.isaddform = false
    },
    addparam(){
      let id=this.parameters.length
      this.parameters.push({
          id:id,
          name:"",
          value:"",
          desc:'',
          is_edit:true,
        })
    },
    delectAdd(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(() => {
          for(var i = 0; i < this.rows.length; i++) {
							if(this.rows[i].id == id) {
								this.rows.splice(i, 1);
							}
						}
				}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
				});
    },
    deletePars(id){
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          for(var i = 0; i < this.parameters.length; i++) {
							if(this.parameters[i].id == id) {
								this.parameters.splice(i, 1);
							}
						}
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        console.log(data);
    }
  }
}
</script>

<style scoped>
.tenancemain{
    padding: 8px;
}
.page{
    text-align: center
}
a{
  color: blue;
    text-decoration: none;
}
.btngroup{
  padding: 8px 0px;
}
.addform .el-form-item{
  margin: 0px;
}
.addDialog .el-dialog__body{
  padding: 10px;
}
input{
  height: 30px;
  line-height: 30px;
}
.el-radio__label{
  display: none!important;
}
</style>